<template>
    <layout>

        <mt-header title="历史练习">\
            <a href="/study" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        <div class="tab_list">

            <div id="tabBar" :class="{ fixed : tabBarFixed}">

                <mt-navbar class="page-part" v-model="selected">
                    <mt-tab-item id="1">专项巩固</mt-tab-item>
                    <mt-tab-item id="2">普遍错题</mt-tab-item>
                    <mt-tab-item id="3">个人错题</mt-tab-item>
                    <mt-tab-item id="4">随机巩固</mt-tab-item>
                </mt-navbar>

            </div>



            <div  class="list_box">
                <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                    <ul class="school_ul"
                        v-infinite-scroll="loadMore"
                        infinite-scroll-disabled="loading"
                        infinite-scroll-distance="50" id="content">

                        <template>
                            <li class="yuwen" v-for="item in list">
                                <div class="top">

                                    <img :src="api.image + item.courseImage">

                                </div>
                                <div class="con">
                                    <span class="frist">{{ item.courseName }}作业 </span>
                                    <span class="last">已做题目: {{ item.totalCount}}</span>
                                    <span class="concon">练习用时  &nbsp;  {{ item.createTime | data}}</span>

                                </div>
                                <a  :href="'/study/practice/result?id=' + item.id"><div class="foo">练习报告</div></a>


                            </li>
                        </template>

                    </ul>

                    <p v-show="loading" class="page-infinite-loading">
                        <mt-spinner :size="20" type="fading-circle"></mt-spinner>
                        <span>加载中...</span>
                    </p>
                </div>
            </div>

        </div>

    </layout>
</template>
<style lang="scss">
    @import "index.scss";
    img{
        /*background: #000000;*/
    }
    .fixed {
        position:fixed;
        left: 0;
        float: left;
        width: 100%;
        top:0;
        z-index:9999;
    }
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                selected: '1',
                loading: false,
                wrapperHeight: 0,
                list: [],
                isShow:false,
                tabBarFixed: false,
                oneList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
                twoList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
                threeList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                },
                fourList: {
                    list: [],
                    lastPage: false,
                    pageNo: 0,
                    nextPage: 1,
                    loading: false,
                    wrapperHeight: 0,
                }
            }
        },
        filters: {
            data:function (data) {
                var d = new Date(data);
                var hour = d.getHours();
                var minutes = d.getMinutes();
                var seconds = d.getSeconds();
                return   hour + ':' + minutes;
            }

        },
        computed: {
            api(){
                return api();
            },

        },
        watch: {
            selected: function () {
                // let scrollHeight = 0;

                if(this.selected == '1'){
                    this.list = this.oneList.list;
                }
                else if (this.selected == '2'){
                    this.list = this.twoList.list;
                }else if (this.selected == '3'){
                    this.list = this.threeList.list;
                }else if (this.selected == '4'){
                    this.list = this.fourList.list;
                }else{
                    // this.list = this.forumList.list;
                }
                if (this.list.length == 0){
                    window.scrollTo(0, 0);
                    this.loadMore();
                }
            }
        },
        methods: {
            loadMore: function () {
                if (this.loading) {
                    return;
                }

                let params = new URLSearchParams();
                params.append("type", this.selected);

                if (this.selected == '1') {
                    if (this.oneList.lastPage) {
                        return;
                    }

                    params.append("pageNo", this.oneList.nextPage);

                    this.loading = true;
                    this.$http.post('/api/practice/history', params).then((response) => {
                        if (response.status == 200) {
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.oneList.lastPage = data.lastPage;
                                this.oneList.pageNo = data.pageNo;
                                this.oneList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++) {
                                    this.oneList.list.push(list[i]);
                                }
                                this.list = this.oneList.list;
                            }

                        } else {
                            this.oneList.lastPage = false;
                        }
                        this.loading = false;
                    });
                } else if (this.selected == '2') {
                    if (this.twoList.lastPage) {
                        return;
                    }

                    params.append("pageNo", this.twoList.nextPage);

                    this.loading = true;
                    this.$http.post('/api/practice/history', params).then((response) => {
                        if (response.status == 200) {
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.twoList.lastPage = data.lastPage;
                                this.twoList.pageNo = data.pageNo;
                                this.twoList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++) {
                                    this.twoList.list.push(list[i]);
                                }
                                this.list = this.twoList.list;
                            }

                        } else {
                            this.twoList.lastPage = true;
                        }
                        this.loading = false;
                    });
                } else if (this.selected == '3') {
                    if (this.threeList.lastPage) {
                        return;
                    }

                    params.append("pageNo", this.threeList.nextPage);

                    this.loading = true;
                    this.$http.post('/api/practice/history', params).then((response) => {
                        if (response.status == 200) {
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.threeList.lastPage = data.lastPage;
                                this.threeList.pageNo = data.pageNo;
                                this.threeList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++) {
                                    this.threeList.list.push(list[i]);
                                }
                                this.list = this.threeList.list;
                            }

                        } else {
                            this.threeList.lastPage = true;
                        }
                        this.loading = false;
                    });
                } else if (this.selected == '4') {
                    if (this.fourList.lastPage) {
                        return;
                    }

                    params.append("pageNo", this.fourList.nextPage);

                    this.loading = true;
                    this.$http.post('/api/practice/history', params).then((response) => {
                        if (response.status == 200) {
                            let data = response.data;
                            if (data.code == 200) {
                                data = data.data;
                                this.fourList.lastPage = data.lastPage;
                                this.fourList.pageNo = data.pageNo;
                                this.fourList.nextPage = data.nextPage;

                                let list = data.list;
                                for (let i = 0; i < list.length; i++) {
                                    this.fourList.list.push(list[i]);
                                }
                                this.list = this.fourList.list;
                            }

                        } else {
                            this.fourList.lastPage = true;
                        }
                        this.loading = false;
                    });
                }
            },

            handleScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var offsetTop = document.querySelector('#tabBar').offsetTop;

                if (scrollTop > offsetTop) {
                    this.tabBarFixed = true
                } else {
                    this.tabBarFixed = false
                }
            },

        },
        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
            window.addEventListener('scroll', this.handleScroll)
        },
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll)
        }
    }
</script>
